<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
 <%@page import="java.text.*"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考勤记录</title>
<link href="<c:url value='/insdep/reset.min.css' />" rel="stylesheet" type="text/css">
<link href="<c:url value='/insdep/easyui_full.css'/>" rel="stylesheet" type="text/css">
<link href="<c:url value='/insdep/icon.css'/>" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<c:url value='/insdep/jquery-1.11.3.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/insdep/jquery.easyui-1.5.2.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/insdep/insdep-extend.min.js'/>"></script>
<link rel="stylesheet" type="text/css" href="<c:url value='/insdep/iconfont/iconfont.css' />">
<link href="<c:url value='/css/wsf-button.css'/>" rel="stylesheet" type="text/css">
</head>
<body>
<script type="text/javascript">
$(function(){
	var locempid = "";
	/**
	 *员工树形展示
	 */
	$('#check_work_emp_tree').tree({ 
			onSelect: function(node){
				 locempid = node.id;
				 if(node.attributes.vivo=="no"){
					 $('#check_work_emp_info_dg').datagrid({
						url:'find_CheckWorkEmpInfoByEmpId',
						queryParams: {
							empId: node.id
						}
					});
				 }
			}
	});

	//树的默认选中项,并加载数据
	$("#check_work_emp_tree").tree({
		onLoadSuccess : function(){
			//获取根节点
			var root = $('#check_work_emp_tree').tree('getRoot');
			//获取根节点的子节点
			var children = $('#check_work_emp_tree').tree('getChildren',root);
			//默认选中的子根节点
			var node = $('#check_work_emp_tree').tree('find', children[1].id);
			$('#check_work_emp_tree').tree('select', node.target); 
		}
	}); 
	/**
	 *时间段查询
	 */
	$('#check_work_query_emp').linkbutton({
			onClick:function(){
				var starttime = $("#check_work_start_date").val();
				var endtime = $("#check_work_end_date").val();
				$("<form method='post'>").form({
					url:'find_CheckWorkEmpInfoByEmpId',
					onSubmit:function(param){
						param.empId = locempid;
						param.starttime = starttime;
						param.endtime = endtime;
						param.page = '1';
						param.rows = '2';
					},
					success:function(info){
						var relsetdate = $.parseJSON(info);
						$('#check_work_emp_info_dg').datagrid('loadData',relsetdate);
					}
					
				}).submit();
			}
	});
	/**
	 *重置
	 */
	 $("#check_work_refresh_emp").linkbutton({
		onClick:function(){
			 $("#check_work_start_date").datebox('setValue', '');
			 $("#check_work_end_date").datebox('setValue', '');
			 $("#check_work_emp_info_dg").datagrid("load");
		} 
	 });
	/**
	 *新增考勤记录
	 */
	 $("#check_work_add_record").linkbutton({
		onClick:function(){
			$("#check_work_emp_info_dg").datagrid("selectRow",1);
			var row = $("#check_work_emp_info_dg").datagrid("getSelected");
			//通过ajax查询员工当天是否已经考勤
			$.post( "find_EmpIsCheckWork", 
					{empid:locempid}, 
					function(data){
						//未考勤则可以新增考勤
						if(!data) {
							$("#create_check_work_record_win").window({
							      width: 400,
						          height: 400,
						          title: '新增考勤记录',
						          iconCls: 'icon-update',
						          modal: true,//表示模式窗口
						          maximizable:false,
						          minimizable:false,
						          collapsible:false,
						          draggable: false,
								  href:'to_CreateCheckWorkRecord',//请求远程数据
								  onLoad:function(){
									  $('#create_check_work_form').form('load',{
										  attendanceOffworktime:row.attparamLate,
										  attendanceOnworktime:row.attparamLeaveearly,
										  empId:locempid
							    		});
								  	}
								}); 
						} else{
							$.messager.confirm('提示', '今天已经签到了，明天再来吧！');
						}
					}
			);
			} 
	 });
	//分页将参数带过去
	$('#check_work_emp_info_dg').datagrid({
		onBeforeLoad:function(param){
			param.starttime=$("#check_work_start_date").val();
			param.endtime=$("#check_work_end_date").val();
		},
		rowStyler: function(index,row){
			var attdate = row.attendanceDate;
			//判断如果是周末则改变背景颜色
			if (new Date(attdate).getDay()==0 || new Date(attdate).getDay()==6){
				return 'background-color:#FFD39B';    
			}  
			
		} 
	});  
});
//在页面完全加载完之后执行
$(window).load(function(){
	//限制开始时间不能选择大于当前日期的时间
	var startcalendar = $('#check_work_start_date').datebox('calendar');
	startcalendar.calendar({
		validator: function(date){
			//当前时间
			var current = new Date().getTime();
			//结束时间
	    	var enddate = $('#check_work_end_date').val();
			
			
			if (date.getTime()>current) { 
				return false;
			} else {                 
				return true;                                
			}
		}
	});
	//限制结束时间不能选择大于当前日期的时间
	var endcalendar = $('#check_work_end_date').datebox('calendar');
	endcalendar.calendar({
		validator: function(date){
			var current = new Date().getTime();
	    	var startdate = $('#check_work_start_date').val();
	    	
			if (date.getTime()>current) { 
				//alert('选择的时间不能大于当前时间！');
				return false;
			} else {                 
				return true;                                
			}
	    	 
		}
	});
});	
/* var d, s = "";
d = new Date(val);
s += d.getFullYear() + "-" + (d.getMonth() + 1)
		+ "-" + d.getDate()+" ";
return s += x[d.getDay()]; */
	/**
	 *毫秒转日期
	 */
	function formatter_date(val, row, index){
		var x = new Array("星期日", "星期一", "星期二", "星期三",
				"星期四", "星期五", "星期六");
		return new Date(val).toLocaleDateString()+"("+x[new Date(val).getDay()]+")";  
	}
	/**
	 *改变字体颜色
	 */
	function formatter_font_color(val, row, index){
		return "<span style='color:red'>"+val+"</span>";
	}
</script>
	<div id="check_work_layout" class="easyui-layout" fit="true" ">   
	    <div data-options="region:'west',title:'员工',split:true" style="width:15%;">
	    	<ul id="check_work_emp_tree" class="easyui-tree" data-options="url:'find_CheckDeptAndEmp'"></ul> 
	    </div>   
	    <div data-options="region:'center',title:'考勤记录 title',fit:true" style="padding:5px;background:#eee;">
	    	<div data-options="region:'center',border:false" style="border-top: 1px solid #D3D3D3;height:100%;">
				<table id="check_work_emp_info_dg" class="easyui-datagrid" 
				data-options="
				fit:true,
				fitColumns:true,
				rownumbers: true,
				toolbar: '#check_work_query',
				nowrap:false, 
				autoRowHeight:true,
				autoRowWidth:300,
				singleSelect:true,
				pagination:true,
				pageSize: 2,
				pageList:[2,4,6,8]">
				<thead>
					<tr>
						<th data-options="field:'attendanceId', align:'center',hidden:true">考勤编号</th>
						<th style="width:20%;" data-options="field:'attendanceDate', align:'center', formatter:formatter_date">考勤日期</th>
						<th style="width:10%;" data-options="field:'attparamLate', align:'center',formatter:formatter_font_color">上班时间</th>
						<th style="width:10%;" data-options="field:'attendanceOffworktime', align:'center'">实际上班时间</th>
						<th style="width:10%;" data-options="field:'attparamLeaveearly', align:'center',formatter:formatter_font_color">下班时间</th>
						<th style="width:10%;" data-options="field:'attendanceOnworktime', align:'center'">实际下班时间</th>
						<th data-options="field:'empId', align:'center',hidden:true">员工编号</th>
						<th data-options="field:'empName', align:'center',hidden:true">员工名字</th>
						<th data-options="field:'attypeId', align:'center',hidden:true">考勤类型编号</th>
						<th style="width:30%;" data-options="field:'attypeName', align:'center'">考勤类型名称</th>
					</tr>
				</thead>
				</table>
		    </div>
	    </div>  
	    <div id="check_work_query">
	    	时间：<input  id="check_work_start_date"  type= "text" class= "easyui-datebox"> <span>--</span> 
	    	<input  id="check_work_end_date"  type= "text" class= "easyui-datebox"> 
    		<a id="check_work_query_emp" class="easyui-linkbutton" data-options="iconCls:'icon-add'">查询</a>
    		<a id="check_work_add_record" class="easyui-linkbutton" data-options="iconCls:'icon-add'">增加</a>
    		<a id="check_work_refresh_emp" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">重置</a> 
	    </div> 
	</div> 
	<!-- 新增考勤记录 -->
	<div id="create_check_work_record_win"></div>
</body>
</html>